<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-butterbar.html">
<link rel="import" href="../common/cr-button.html">
<link rel="import" href="../common/cr-dialog.html">
<link rel="import" href="../common/cr-toolbar.html">

<polymer-element name="cr-try-dialog" attributes="issue">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <link rel="stylesheet" href="../common/forms.css">
        <style>
            #servers {
                height: 500px;
                max-height: 50vh;
                margin: 0.5em 16px;
                overflow-y: scroll;
            }

            h2 {
                color: #959595;
                margin: 0;
                padding: 0;
            }

            .builders {
                padding: 0.5em 16px;
            }

            label {
                display: block;
            }
        </style>

        <dialog is="cr-dialog" id="dialog" on-cancel="{{ cancel }}">
            <cr-butterbar message="{{ butterbarMessage }}"></cr-butterbar>

            <h1>Add try jobs</h1>

            <div class="form-row">
                <label class="form-label" for="builderFilter">Filter</label>
                <div class="form-field" id="builderFilter">
                    <input type="text" value="{{ builderFilter }}">
                </div>
            </div>

            <fieldset id="servers" disabled?="{{ sending }}">
                <template repeat="{{ server in servers.serversAndBuilders | filterServers(builderFilter) }}">
                    <h2>{{ server.name }}</h2>
                    <div class="builders">
                        <template repeat="{{ builder in server.builders }}">
                            <label class="builder">
                                <input type="checkbox" checked="{{ checked[builder] }}">
                                {{ builder }}
                            </label>
                        </template>
                    </div>
                </template>
            </fieldset>

            <cr-toolbar>
                <button is="cr-button" primary on-tap="{{ save }}">Add</button>
                <button is="cr-button" on-tap="{{ cancel }}">Cancel</button>
            </cr-toolbar>
        </dialog>
    </template>
    <script>
        Polymer({
            created: function() {
                this.servers = null;
                this.issue = null;
                this.checked = {};
                this.butterbarMessage = "";
                this.saving = false;
                this.builderFilter = "";

                var self = this;
                var servers = new TryServers();
                servers.loadDetails().then(function() {
                    self.servers = servers;
                }).catch(function(e) {
                    console.log(e);
                });
            },
            cancel: function(event) {
                this.close();
            },
            reset: function() {
                this.saving = false;
                this.butterbarMessage = "";
                this.checked = {};
                this.builderFilter = "";
            },
            close: function() {
                this.reset();
                this.$.dialog.close();
            },
            save: function(options) {
                var builders = [];
                Object.keys(this.checked, function(builder, checked) {
                    if (checked)
                        builders.push(builder);
                });
                this.saving = true;
                this.butterbarMessage = "Saving...";
                this.issue.setFlags({builders: this.servers.createFlagValue(builders)})
                    .then(this.saveSuccess.bind(this))
                    .catch(this.saveFailure.bind(this));
            },
            saveSuccess: function() {
                this.fire("issue-refresh");
                this.close();
            },
            saveFailure: function(error) {
                // TODO(esprehn): We should show an better error message.
                this.saving = false;
                this.butterbarMessage = "Error: " + error.message;
            },
            showModal: function() {
                if (!this.issue)
                    return;
                this.$.dialog.showModal();
            },
            filterServers: function(value, builderFilter) {
                if (!value || !builderFilter)
                    return value;
                builderFilter = builderFilter.trim().toLowerCase();
                return value.map(function(server) {
                    server = Object.clone(server);
                    server.builders = server.builders.filter(function(builder) {
                        return builder.toLowerCase().contains(builderFilter);
                    });
                    return server;
                }).filter(function(server) {
                    return server.builders.length;
                });
            },
        });
    </script>
</polymer-element>
